<template>
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0;z-index: 99;">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="售后详情"></com-nav-bar>
		</view>
		<view :style="{marginTop:fixedTopHeight+'px'}" style="padding: 20rpx 0;min-height: 100vh;">
			
			<view style="background-color: #fff;border-radius: 10rpx;" v-if="refund.id > 0">
				<view style="background-color: #fff;padding:20rpx 10rpx;border-bottom: 2rpx solid #cccccc;display: flex;">
					<view>售后单号：</view>
					<view>{{refund.refund_no}}</view>
				</view>

				<u-collapse :item-style="{backgroundColor: '#fff',padding:'0 10rpx'}" style="border-bottom: 2rpx solid #cccccc;">
					<u-collapse-item>
						<view slot="title" style="width:95vw">售后商品 <text style="margin-left: 40rpx;font-size: 9pt;">共{{refundDetails.length}}项</text></view>
						<view>
							<view style="display: flex;padding: 20rpx 0;" v-for="(itm,idx) in refundDetails" :key="idx">
								<image style="width: 200rpx;height: 200rpx;margin-right: 20rpx;flex-shrink:0;" lazy-load="true" :src="jsonFormat(itm.extend).cover_pic"></image>
								<view style="height:200rpx;display: flex;flex-direction: column;justify-content: space-between;flex-grow: 1;">
									<view v-line-clamp='2' style="font-size: 28rpx;height: 56rpx;line-height: 28rpx;">{{jsonFormat(itm.extend).goods_name}}</view>
									<view v-line-clamp='2' style="font-size: 10pt;color: #909399;">{{jsonFormat(itm.extend).attr_str}}</view>
									<view style="font-size: 12pt;">
										<text style="font-weight: 600;margin-right: 20rpx;">x{{itm.goods_num}}</text>
									</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
				
				<view style="padding:20rpx 10rpx;font-size: 14pt;font-weight: 600;background-color: #f2f2f2;">协商记录</view>
				

				<view style="background-color: #f2f2f2;" v-for="(item,index) in refundScheme" :key="index">
					<view style="font-size: 9pt;text-align: center;">{{formatTimeToStr(item.created_at)}}</view>
					<view style="background-color: #fff;margin: 10rpx;padding: 20rpx;border-radius: 10rpx;" @click="showStatusLogs(item)">
						<view style="margin-bottom: 10rpx;">{{item.scheme_desc}}</view>
						
						<u-collapse>
							<u-collapse-item>
								<view slot="title" style="width:95vw;display: flex;justify-content: space-between;">
									<view style="font-weight: 600;font-size: 12pt;">
										方案：{{item.scheme_type | schemeTypeFilter}} 
										<text v-if="item.refund_price > 0" style="margin-left: 10rpx;color:red">￥{{item.refund_price}}</text>
									</view>
									<view>{{item.is_confirm | schemeConfirmFilter}}</view>
								</view>
								<view>
									<view style="font-size: 9pt;color:red;text-align: center;margin: 20rpx 0;">{{formatTimeToStr(parseInt(item.created_at) + 259200)}}截止，超时未操作将视为同意！</view>
									<view style="display: flex;justify-content: space-around;">
										<view>
											买家：
											<text v-if="jsonFormat(item.extend).user_confirm == 0">待确认</text>
											<text v-if="jsonFormat(item.extend).user_confirm == 1">已同意</text>
											<text v-if="jsonFormat(item.extend).user_confirm == -1">已拒绝</text>
										</view>
										<view>
											卖家：
											<text v-if="jsonFormat(item.extend).mch_confirm == 0">待确认</text>
											<text v-if="jsonFormat(item.extend).mch_confirm == 1">已同意</text>
											<text v-if="jsonFormat(item.extend).mch_confirm == -1">已拒绝</text>
										</view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>
						
						<view style="margin-top: 30rpx;">
							<u-button type="primary" plain size="mini" shape="circle" style="padding: 10rpx 50rpx;margin-right: 30rpx;" @click.stop="refundSchemeConfirm(item.id,1)">同意 | 拒绝</u-button>
							<u-button type="error" plain size="mini" shape="circle" style="padding: 10rpx 50rpx;" @click.stop="refundSchemeConfirm(item.id,-1)">拒绝</u-button>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<u-popup v-model="refundConfirm.visible" mode="top" closeable length="100%" z-index="100">
			<view style="padding: 100rpx 40rpx 40rpx;">
				<u-form ref="refundConfirm" :model="refundConfirm.form" label-position="top">
					<u-form-item label="您的意见">
						<u-radio-group v-model="refundConfirm.form.status">
							<u-radio :name="1">同意</u-radio>
							<u-radio :name="-1">拒绝</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="说明原因">
						<u-input v-model="refundConfirm.form.desc" type="textarea" />
					</u-form-item>
					<u-form-item label="上传凭证">
						<!-- :auto-upload="false" :action="refundConfirm.uploadUrl" -->
						<u-upload :max-size="5 * 1024 * 1024" max-count="5" 
							:auto-upload="false"
							@on-choose-complete="onChooseCompleteHandler" @on-remove="onRemoveFileHandler">
						</u-upload>
					</u-form-item>
				</u-form>
				<u-button type="primary" plain shape="circle" style="" @click.stop="refundConfirmSubmit">提交</u-button>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	let that;
	export default {
		data(){
			return {
				fixedTopHeight:0,
				refund_id:0,
				refund:{},
				refundDetails:[],
				refundScheme:[],
				refundConfirm:{
					visible:false,
					files:[],
					filesMap:{},
					form:{
						scheme_id: 0,
						status: 1,
						desc:'',
						pics:[],
					},
				}
			}
		},
		beforeCreate(){
			that = this;
		},
		onLoad(opt){
			that.refund_id = opt.refund_id ?? 0;
			that.getRefundDetail();
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		computed: {
			jsonFormat(){
				return data => {
					if( typeof data == 'string'){
						data = JSON.parse(data);
					}
					return data ?? {};
				}
			},
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			}
		},
		filters: {
			refundStatusDesc(type){
				const refundStatusMaps = {
					'20': '待确认',
					'25': '待确认',
					'30': '协调中',
					'35': '协调中',
					'40': '协调中',
					'100': '售后完成'
				}
				return refundStatusMaps[type] ?? '未知';
			},
			schemeTypeFilter(type){
				const schemeTypeMaps = {
					'only_refund': '仅退款',
					'return_refund': '退货退款',
					'return_exchange': '退货换货',
					'only_exchange': '不退货换货',
				}
				return schemeTypeMaps[type] ?? '未知';
			},
			schemeConfirmFilter(status){
				const schemeConfirmMaps = {
					'0': '协商中',
					'-1': '已废弃',
					'1': '协商一致'
				}
				return schemeConfirmMaps[status] ?? '未知';
			},
			
		},
		methods:{
			back(){
				that.navBack();
			},
			async getRefundDetail(){
				let res = await this.$http.request({
					url: this.$api.v2Order.refundDetail,
					method: 'get',
					data: {refund_id:that.refund_id},
					showLoading:true
				});
				if(res.code !== 0) {
					return this.$http.toast(res.msg);
				}
				that.refund = res.data.refund;
				that.refundDetails = res.data.refundDetails;
				that.refundScheme = res.data.refundScheme;
				this.$forceUpdate();
			},
			async refundSchemeConfirm(scheme_id,status){
				this.refundConfirm.visible = true;
				// console.log('refundSchemeConfirm',scheme_id,status)
			},
			async showStatusLogs(row){
				console.log('showStatusLogs',row)
			},


			//图片上传
			async onChooseCompleteHandler(filesList){
				uni.showLoading({title:"请稍候..."});
				that.refundConfirm.files = filesList;
				
				for(let i=0;i<filesList.length;i++){
					let path = filesList[i].url;
					if( that.refundConfirm.filesMap[path] ){
						continue ;
					}
					
					let res = await that.$http.uploadFile({
						serverUrl: that.$api.default.upload,
						fileKeyName: "file",
						file:path
					});
					if(res.code !== 0){
						return that.$http.toast(res.msg);
					}
					that.refundConfirm.filesMap[path] = res.data.url;
					that.refundConfirm.form.pics.push(res.data.url);
					// let value = Math.floor(Math.random() * 100) + 1;
					// that.refundConfirm.filesMap[path] = value;
					// that.refundConfirm.form.pics.push(value);
				}
				uni.hideLoading()
			},
			onRemoveFileHandler(index,filesList){
				let remove = that.refundConfirm.files[index];
				let path = that.refundConfirm.filesMap[remove.url];
				let i = that.refundConfirm.form.pics.indexOf(path);
				if( i > -1 ){
					that.refundConfirm.form.pics.splice(i,1)
					delete that.refundConfirm.filesMap[remove.url]
				}
				that.refundConfirm.files = filesList;
			},
			
			
			
			refundConfirmSubmit(){
				console.log(that.refundConfirm)
			}
		}
	}
</script>

<style>
</style>